<template>
  <div class="pagination-container" ref="page">
    <div class="pagination">
      <div class="page-prev"><a class="prev">
          <svg-icon icon-class="left-circle" class-name="svg"></svg-icon>
        </a></div>
      <div class="page-number active"><a>1</a></div>
      <div class="page-number"><a>2</a></div>
      <div class="page-number"><a>3</a></div>
      <div class="page-number"><a>4</a></div>
      <div class="page-number"><a>5</a></div>
      <div class="page-next"><a class="next">
          <svg-icon icon-class="right-circle" class-name="svg"></svg-icon>
        </a></div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.handlePagination()
  },
  methods: {
    handlePagination() {
      // 处理page-number a的点击事件
      // 并给--active-index赋值
      var that = this
      var pageNumbers = document.querySelectorAll('.page-number a')
      pageNumbers.forEach((pageNumber, index) => {
        pageNumber.addEventListener('click', () => {
          pageNumbers.forEach((item) => {
            item.parentElement.classList.remove('active')
          })
          pageNumber.parentElement.classList.add('active')
          that.$refs.page.style.setProperty('--active-index', index)
        })
      })
      // 处理prev点击事件
      // 上一个a为active，若当前大于零，则为active-1,否则置为零
      var pagePrev = document.querySelector('.prev')
      pagePrev.addEventListener('click', () => {
        pageNumbers.forEach((item) => {
          item.parentElement.classList.remove('active')
        })
        // getPropertyValue获取到的string类型，在减法中没有影响，在加法中有体现
        var activeIndex = Number(that.$refs.page.style.getPropertyValue('--active-index'))
        var index = activeIndex > 0 ? activeIndex - 1 : 0
        pageNumbers[index].parentElement.classList.add('active')
        // 再次给--active-index赋值，否则只能点击一次
        that.$refs.page.style.setProperty('--active-index', index)
      })
      // 处理next事件
      // 下一个a为active，若当前小于max则为active+1，否则为max
      var max = pageNumbers.length - 1
      var pageNext = document.querySelector('.next')
      pageNext.addEventListener('click', () => {
        pageNumbers.forEach((item) => {
          item.parentElement.classList.remove('active')
        })
        var activeIndex = Number(that.$refs.page.style.getPropertyValue('--active-index'))
        var index = activeIndex < max ? activeIndex + 1 : max
        pageNumbers[index].parentElement.classList.add('active')
        // 再次给--active-index赋值，否则只能点击一次
        that.$refs.page.style.setProperty('--active-index', index)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .pagination-container {
    --active-index:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin: 0 auto;

    .pagination {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 70px;
      border-radius: 35px;
      padding-left: 10px;
      padding-right: 10px;
      box-shadow: 0 0.3px 0.6px rgba(0, 0, 0, 0.056),
        0 0.7px 1.3px rgba(0, 0, 0, 0.081),
        0 1.3px 2.5px rgba(0, 0, 0, 0.1),
        0 2.2px 4.5px rgba(0, 0, 0, 0.119),
        0 4.2px 8.4px rgba(0, 0, 0, 0.144),
        0 10px 20px rgba(0, 0, 0, 0.2);

      %page-common {
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0 5px;
      }

      .page-number {
        @extend %page-common;

        a {
          text-decoration: none;
          line-height: 50px;
          font-size: 20px;
          font-weight: 700;
          display: block;
          color: #777;
          border-radius: 50%;
          transition: 0.3s ease;
        }

        &:hover a {
          color: #fff;
          background: #777;
        }

        &.active a {
          color: #fff;
          background: #333;
        }
      }

      .page-prev,
      .page-next {
        @extend %page-common;
      }
    }
  }
</style>
<style lang="scss">
  .svg {
    fill: #777 !important;
  }
  .prev, .next{
    &:hover .svg {
      fill: #333 !important;
    }
  }
</style>
